<template>
  <avue-crud
    :option="options"
    v-model:search="search"
    v-model:page="page"
    v-model="form"
    :table-loading="loading"
    :data="data"
    ref="crud"
    @current-change="currentChange"
    @size-change="sizeChange"
    @refresh-change="refreshChange"
    @on-load="onLoad"
    class="electricity-case-file-table"
  >
    <template #menu="{ row }">
      <el-button type="primary" plain :icon="Download" @click="handleTableMenu(0, row)"
        >下 载</el-button
      >
      <el-button type="success" plain :icon="View" @click="handleTableMenu(1, row)"
        >预 览</el-button
      >
    </template>
  </avue-crud>
  <el-image-viewer
    v-if="showPreview"
    :url-list="srcList"
    :initial-index="0"
    :hide-on-click-modal="true"
    @close="showPreview = false"
  />
</template>
<script setup>
import { Download, View } from '@element-plus/icons-vue';
import { eleMedicalRecordFileList } from '@/api/trial/trial';
import { findObject } from '@smallwei/avue';
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();
const route = useRoute();
const routerQuery = ref({});
routerQuery.value = route.query;
const crud = ref(null);
const form = ref({});
const query = ref({});
const search = ref({});
let loading = ref(false);
const page = ref({
  pageSize: 10,
  currentPage: 1,
  total: 0,
});
const options = ref({
  height: '530',
  // calcHeight: 30,
  tip: false,
  searchShow: true,
  searchMenuSpan: 24,
  searchMenuPosition: 'right',
  border: true,
  index: true,
  selection: false,
  dialogClickModal: false,
  align: 'center',
  indexWidth: 80,
  indexLabel: '编号',
  // menu: false,
  labelWidth: 145,
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  addBtn: false,
  gridBtn: false,
  refreshBtn: false,
  columnBtn: false,
  column: [
    {
      label: '文件名',
      prop: 'name',
      type: 'input',
      filterable: true,
      overHidden: true,
      // rules: [
      //   {
      //     required: true,
      //     message: '请输入病例名称',
      //     trigger: 'blur',
      //   },
      // ],
    },
    {
      label: '病例名称',
      prop: 'eleMedicalRecordName',
      type: 'textarea',
      minRows: 3,
      maxRows: 5,
      filterable: true,
      overHidden: true,
      span: 24,
    },
    {
      label: '病例备注',
      prop: 'eleMedicalRecordRemark',
      type: 'textarea',
      minRows: 3,
      maxRows: 5,
      filterable: true,
      overHidden: true,
      span: 24,
    },
    {
      label: '创建时间',
      prop: 'createTime',
      type: 'input',
      filterable: true,
      overHidden: true,
    },
  ],
});
const data = ref([]);
let clickTableMenuValue = ref({});
let srcList = ref([]);
let showPreview = ref(false);

// 表格操作栏按钮点击事件
/* 
  type 0:下载
  type 1:预览
*/
const handleTableMenu = (type, row) => {
  clickTableMenuValue.value = { type, row };
  if (type === 0) {
    window.open(row.link, '_blank');
  }
  if (type === 1) {
    const imageRegex = /\.(jpg|jpeg|png|gif|bmp|webp)$/i;
    const fileExtension = row.link.split('.').pop().toLowerCase();
    if (!imageRegex.test(row.link)) {
      ElMessage({
        message: `当前格式为${fileExtension.toUpperCase()}，只能预览图片格式！`,
        type: 'warning',
      });
      return;
    }
    showPreview.value = true;
    srcList.value = [row.link];
  }
  // if (type === 0) {
  //   window.open(row.url);
  // } else if (type === 1) {
  //   window.open(row.url);
  // }
};

const open = () => {
  onLoad(page.value, query.value);
};

const currentChange = currentPage => {
  page.value.currentPage = currentPage;
};

const sizeChange = pageSize => {
  page.value.pageSize = pageSize;
};

const refreshChange = () => {
  onLoad(page.value, query.value);
};

const onLoad = (page, params) => {
  loading.value = true;
  let values = {
    descs: 'create_time',
    ...params,
    caseId: routerQuery.value.caseManagementId,
    classification: '2',
  };
  eleMedicalRecordFileList(page.currentPage, page.pageSize, values).then(res => {
    const DATA = res.data.data;
    page.total = DATA.total;
    data.value = DATA.records;
    loading.value = false;
    // selectionClear();
  });
};
defineExpose({
  open
});
</script>
<style scoped lang="scss">
.electricity-case-file-table {
  ::v-deep .avue-crud__header {
    display: none;
  }
}
</style>